@import "../Questions.css";

:local(.sectionHeader) {
  composes: p1 px3 from "style";
  composes: flex align-center from "style";
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0px;
}

:local(.list) {
  composes: flex align-center from "style";
  composes: px2 from "style";
}

:local(.sectionList) {
  composes: list;
  composes: border-top from "style";
  composes: py1 from "style";
  justify-content: space-around;
}

:local(.option) {
  composes: p1 from "style";
  composes: flex layout-centered from "style";
  composes: cursor-pointer from "style";
  border: 1px solid transparent;
  width: 50px;
  height: 50px;
}

:local(.option):hover {
  border: 1px solid rgb(235, 235, 235);
  border-radius: 3px;
  background-color: rgb(248, 248, 248);
  cursor: pointer;
}

:local(.dropdownButton) {
  composes: flex rounded px1 layout-centered from "style";
  border: 1px solid #d9d9d9;
  padding: 10px;
}

:local(.dropdownButton):hover {
  border-color: #aaa;
}

:local(.chevron) {
  composes: ml1 from "style";
  color: #d9d9d9;
}

:local(.category) {
  justify-content: space-between;
  composes: p1 cursor-pointer transition-color from "style";
  color: #cfe4f5;
}

:local(.category):hover {
  color: var(--blue-color);
}
